<script setup name="OrderDeliverDialog">
import { ElMessage } from 'element-plus';
import ProductItem from '/@/components/product/ProductItem.vue';
import { useCouponApi } from '/@/api/coupon';
import { useOrderApi } from '/@/api/order';
import AddressItem from '/@/components/address/addressItem.vue';
import { timeFormat } from '/@/utils/filters';
import orderState from '/@/utils/pageState/orderState';

const { SHIPPED } = orderState();
const { getOrderList } = useOrderApi();
const { EndCoupon } = useCouponApi();

const emit = defineEmits(['submit', 'update:modelValue']);
let orderDetail = ref({
	orderId: 0,
	orderStatus: '',
	orderNo: '',
	paymentChannel: '',
	paymentTime: '',
	paymentOrder: '',
	contactInformation: '',
	logisticsCompany: '',
	logisticsOrderNo: '',
});
let tableData = ref([]);
let logisticsList = ref({
	name: string,
	value: number,
}); // 物流列表
let selectLoading = ref(false);
let loading = ref(false);
let submitLoading = ref(false);
let sendChecked = ref(false);
let addressItem = ref({});
let defaultAddressItem = {};
// expects props options
const props = defineProps({
	modelValue: {
		type: Boolean,
		default: false,
	},
	orderId: {
		type: Number,
		default: 0,
	},
});

init();

function init() {
	getLogisticsList();
	getData();
}

function getLogisticsList() {
	selectLoading.value = true;
	try {
		setTimeout(() => {
			logisticsList.value = [
				{
					name: '空',
					value: 0,
				},
				{
					name: '文森特物流',
					value: 1,
				},
				{
					name: '而是惹我惹我物流',
					value: 2,
				},
				{
					name: '而温柔如风物流',
					value: 3,
				},
			];
			selectLoading.value = false;
		}, 1000);
	} catch (error) {
		selectLoading.value = false;
	}
}

async function getData() {
	loading.value = true;
	try {
		let params = {
			orderId: props.orderId,
		};
		let res = await getOrderList(params);
		if (res.code !== 200) {
			loading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		loading.value = false;

		let tempList = [];
		let item = res.data.data.data;
		tempList = item.orderItemDetail.map((item, index) => {
			return {
				id: index,
				product: {
					id: '23123',
					url: 'https://img0.baidu.com/it/u=2725677310,1998166489&fm=26&fmt=auto',
					quantity: 3,
					title:
						'这一季，宜家主要着眼于丰富纹理与经典的斯堪的纳维亚设计。让我们放慢生活的脚步，在家里打造一个舒适宁静的角落，在寒冷的季节里享受温馨。',
					link: 'https://www.ikea.cn/cn/zh/search/products/?q=%C3%84PPLARYD',
					sku: '21312321312312312321312321312',
				},
				length: 1,
				price: '$279.00',
				paidIn: '£500',
				totalPrice: '£558',
				postage: '£0',
				taxation: '£0',
				discount: '-£58',
				remark: '用户订单留言',
				logisticsCompany: 0,
				logisticsOrderNo: '12321认为惹我认为',
			};
		});
		tableData.value = tempList;
		sendChecked.value = false;
		getAddressItem(item);
		getDetail(item);
	} catch (error) {
		loading.value = false;
	}
}

// 获取订单地址
function getAddressItem(item) {
	addressItem.value = {
		id: '',
		isDefault: false,
		label: '家庭住址',
		firstName: 'Paul',
		lastName: 'Andrews',
		address: '8 Maple Walk ',
		etc: 'eeeeeeeeeeeeeeeeeeeee',
		city: 'Blackburn',
		countryValue: 1,
		countryLabel: '英国',
		postCode: 'BB2 5FW ',
		phone: '07512 133655',
	};
	defaultAddressItem = addressItem.value;
}

// 设置详情
function getDetail(item) {
	orderDetail.value = {
		orderId: props.orderId,
		orderStatus: SHIPPED,
		orderNo: '202111250201123602',
		paymentChannel: 'afterpay',
		paymentTime: timeFormat('2021-12-06T15:13:46'),
		paymentOrder: '20211125020112360125',
		contactInformation: '23ocha_qin@163.com',
		logisticsCompany: '德邦物流',
		logisticsOrderNo: '20211125020112360125',
	};
}

function beforeClose() {
	close();
}

function close() {
	emit('update:modelValue', false);
}

async function submit() {
	if (submitLoading.value) {
		return;
	}
	submitLoading.value = true;
	let params = {};
	try {
		let res = await EndCoupon(params);
		if (res.code !== 200) {
			submitLoading.value = false;
			// ElMessage({
			//     type: "error",
			//     message: res.data.msg,
			// });
			return;
		}
		submitLoading.value = false;
		ElMessage({
			type: 'success',
			message: '保存成功',
		});
		emit('submit');
		close();
	} catch (error) {
		submitLoading.value = false;
		ElMessage({
			type: 'error',
			message: '保存出错',
		});
	}
}
</script>

<template>
	<div class>
		<el-dialog v-model="modelValue" title="去发货" width="1200px" :destroy-on-close="true" :before-close="beforeClose">
			<div class="order-deliver">
				<el-row align="middle">
					<el-col :span="24">
						<div class="order-h2">商品信息：</div>
					</el-col>
					<el-col :span="24" v-loading="loading">
						<el-row>
							<el-col :span="8">
								<div class="line-box">
									<div class="line-left">订单编号：</div>
									<div class="line-right">
										<div class="text">{{ orderDetail.orderNo }}</div>
									</div>
								</div>
							</el-col>
							<el-col :span="8">
								<div class="line-box">
									<div class="line-left">下单时间：</div>
									<div class="line-right">
										<div class="text">{{ orderDetail.paymentTime }}</div>
									</div>
								</div>
							</el-col>
							<el-col :span="4"></el-col>
							<el-col :span="4">
								<div class="line-link">
									<el-link type="primary">打印发货单</el-link>
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="24">
						<div class="order-h2">收货地址：</div>
					</el-col>
					<el-col :span="24">
						<AddressItem :item="addressItem" :defaultItem="defaultAddressItem" :loading="false" :disabled="true" />
					</el-col>
					<el-col :span="24">
						<el-table v-loading="loading" :data="tableData" border style="width: 100%">
							<el-table-column label="商品" width="500px">
								<template #default="scope">
									<ProductItem :item="scope.row.product" />
								</template>
							</el-table-column>
							<el-table-column prop="length" label="数量"></el-table-column>
							<el-table-column prop label="物流公司" width="200px">
								<template #default="scope">
									<el-select v-model="scope.row.logisticsCompany" placeholder="Select">
										<el-option v-for="item in logisticsList" :key="item.value" :label="item.name" :value="item.value"></el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="物流单号" width="200px">
								<template #default="scope">
									<el-input v-model="scope.row.logisticsOrderNo" placeholder="填写物流单号" maxlength="200" />
								</template>
							</el-table-column>
							<el-table-column prop="remark" label="订单备注"></el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<el-row align="middle">
					<el-col :span="24">
						<div class="order-h4">通知发货情况：</div>
					</el-col>
					<el-col :span="24">
						<el-checkbox v-model="sendChecked" label="立即将发货信息发送给客户"></el-checkbox>
					</el-col>
				</el-row>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="close" :loading="submitLoading">取消</el-button>
					<el-button type="primary" @click="submit" :loading="submitLoading">保存</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<style lang="scss" scoped>
.order-deliver {
	max-height: 800px;
	overflow-y: auto;
	.order-h1 {
		font-size: 40px;
		padding-bottom: 20px;
	}
	.order-h2 {
		font-size: 24px;
		padding-bottom: 20px;
		padding-top: 20px;
	}
	.order-h4 {
		font-size: 20px;
		padding-bottom: 10px;
		padding-top: 20px;
	}
	.line-box {
		padding-bottom: 18px;
		font-size: 16px;
		display: flex;
		.line-left {
			width: 100px;
			display: flex;
			align-items: center;
			font-size: 16px;
		}
		.line-right {
			flex: 1;
			display: flex;
			align-items: flex-end;
			.order-state {
				font-size: 20px;
				color: green;
				padding-right: 50px;
			}
			.order-state-btn {
			}
			.text {
				font-size: 16px;
			}
		}
	}
}
</style>
